<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./assets/css/bootstrap.min.css">
  <script src="./assets/js/bootstrap.bundle.min.js"></script>
  <script src="./assets/js/vue@2.js"></script>
  <script src="./assets/js/axios.min.js"></script>

<body>
  <div id="container" class="container">
    <div class="row">
      <div class="col-sm-12 text-center">
        <h2>输入DEM图片数据</h2>
        <div class="card">
          <div class="card-body">
            <img id="dem_pic" :src="dempic" class="img-thumbnail" style="height:300px;">
          </div>
          <div class="card-footer">
            <input type="file" class="form-control" id="inputGroupFile" v-on:change="dempicSelected">
          </div>
        </div>
      </div>
    </div>
    <br>
    <div class="row">
      <div id='styleSelector' class="col-sm-6 text-center">
        <h2>迁移风格-{{styleText}}</h2>
        <div class="card">
          <div class="card-body">
            <img id="style_pic" :src="stylepic" class="img-thumbnail" style="height:300px ;">
          </div>
          <div class="card-footer">
            <div class="dropdown">
              <button class="btn btn-primary dropdown-toggle btn-block" type="button" id="dropdownMenuButton1"
                data-bs-toggle="dropdown" aria-expanded="false">
                选择
              </button>
              <ul class="dropdown-menu" id='style-dropdown-menu' aria-labelledby="dropdownMenuButton1">
                <a class="dropdown-item" v-on:click="styleSelected" v-for="item in items" :key="item.style">
                  {{ item.style }}
                </a>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-6 text-center">
        <h2>生成数据</h2>
        <div class="card">
          <div class="card-body">
            <img id="result_pic" :src="resultpic" class="img-thumbnail" style="height:300px;">
          </div>
          <div class=" card-footer">
            <button type="button" id="btn_openOutputFileDialog" class="btn btn-primary btn-block"
              v-on:click="openOutputFileDialog" :disabled="isdisabledFn">打开对应文件夹</button>
          </div>
        </div>
      </div>
    </div>
    <br>
    <div class="row">
      <button type="button" id="btn_task" class="btn btn-primary btn-lg btn-block"
        v-on:click="transfer_btn">开始转换(运行需要约10s)</button>
    </div>
    <br>
    <div class="progress" v-if="progressValueShow">
      <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
        :aria-valuenow="progressValue" aria-valuemin="0" aria-valuemax="100" :style="'width:' + progressValue + '%'">
        {{ progressValue }}%
      </div>
    </div>
  </div>
  <script src=" ./renderer.js">
  </script>
</body>

</html>